<template>
  <div id="app">
    <button @click="fn">点击我</button>
    <div>{{ msg }}</div>
    <div v-xs="false" class="my">我是模拟的v-show</div>
     <!-- 组件不能起标签名 -->
    <Son v-if="flag" chuan="我是父组件给子组件的值"></Son>
    <Daughter></Daughter>
    <button @click="flag=!flag">点击我销毁和创建组件</button>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
<script>
import Son from "./views/son.vue"
import Daughter from "./views/daughter.vue"

export default {
   // 注册组件
   components:{
       Son,
       Daughter
   },
  // 放变量的
  data() {
    return {
      msg: "1909a",
      arr: [{ name: "zhangsan", age: 20 }],
      flag:true
    };
  },
  // 放方法的
  methods: {
    fn() {
      this.msg = "你笑起来真好看";
      this.arr[0].age = 10;
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    // 函数形式的watch只能监听基本数据类型
    msg(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    },
    arr: {
      deep: true, //
      handler(newVal, oldVal) {
          console.log(newVal,oldVal)
          console.log(11111)
      },
    },
  },
  // 自定义指令
  directives: {
   // 自己定义一个指令，功能和v-show一样
   xs: {
    // 指令的定义
    inserted: function (el,binding) {
        console.log(el)
        console.log(binding)
        if (binding.value == true) {
            el.style.display = "block"
        } else {
              el.style.display = "none"
        }
    }
  }
},
mounted() {
    this.$bus.$on("send",(data)=>{
        console.log(data)
    })
}
};
</script>

